<ion-app>
    <ion-menu side="start">
        <ion-header>
            <div class="flex-ver-cnt-cnt care-color" padding>
                <ion-thumbnail class="avatar-container" margin-top [ngStyle]="menuHeaderStyle">
                    <ion-img [src]="userData.avatar_url || '/assets/img/iconheadimg.png'"></ion-img>
                </ion-thumbnail>
                <ion-text color="light">
                    <h5 *ngIf="!userData.nickname">{{ 'Nickname' | translate}}</h5>
                    <h5 *ngIf="!!userData.nickname">{{userData.nickname}}</h5>
                </ion-text>
            </div>
        </ion-header>
        <ion-content>
            <ion-list>
                <ion-menu-toggle auto-hide="false">
                    <ion-item routerLink="/doctor-app/doctor-my-messages" detail>
                        <ion-icon slot="start" name="notifications"></ion-icon>
                        <ion-label>
                            {{ 'MyMessages' | translate}}
                        </ion-label>
                    </ion-item>
                </ion-menu-toggle>
                <ion-menu-toggle auto-hide="false">
                    <ion-item detail>
                        <ion-icon slot="start" name="paper"></ion-icon>
                        <ion-label>
                                {{ 'Listtwo' | translate}}
                        </ion-label>
                        <ion-badge color="danger" *ngIf="unreadNum > 0">{{unreadNum}}</ion-badge>
                    </ion-item>
                </ion-menu-toggle>
                <ion-menu-toggle auto-hide="false">
                    <ion-item routerLink="/doctor-app/doctor-appointments" detail>
                        <ion-icon slot="start" name="create"></ion-icon>
                        <ion-label>
                            {{ 'Listseven' | translate}}
                        </ion-label>
                    </ion-item>
                </ion-menu-toggle>
                <ion-menu-toggle auto-hide="false">
                    <ion-item routerLink="/doctor-app/doctor-personal-center" detail>
                        <ion-icon slot="start" name="person"></ion-icon>
                        <ion-label>
                            {{ 'Listthree' | translate}}
                        </ion-label>
                    </ion-item>
                </ion-menu-toggle>
                <ion-menu-toggle auto-hide="false" (click)="toPage()">
                    <ion-item detail>
                        <ion-icon slot="start" name="unlock"></ion-icon>
                        <ion-label>
                            {{ 'Listfour' | translate}}
                        </ion-label>
                    </ion-item>
                </ion-menu-toggle>
                <!-- <ion-menu-toggle auto-hide="false">
                    <ion-item detail>
                        <ion-icon slot="start" name="cloud-upload"></ion-icon>
                        <ion-label>
                            {{ 'Listfive' | translate}}
                        </ion-label>
                    </ion-item>
                </ion-menu-toggle> -->
                <ion-menu-toggle auto-hide="false" (click)="signOut()" detail>
                    <ion-item detail>
                        <ion-icon slot="start" name="settings"></ion-icon>
                        <ion-label>
                            {{ 'Listsix' | translate}}
                        </ion-label>
                    </ion-item>
                </ion-menu-toggle>

                <ion-menu-toggle auto-hide="false" (click)="logOut()" detail>
                    <ion-item detail>
                        <ion-icon slot="start" name="log-out"></ion-icon>
                        <ion-label>
                            {{ 'Listeight' | translate}}
                        </ion-label>
                    </ion-item>
                </ion-menu-toggle>

                <ion-menu-toggle auto-hide="false" (click)="onHelp()" detail>
                    <ion-item detail>
                        <ion-icon slot="start" name="help-circle-outline"></ion-icon>
                        <ion-label>
                            {{ 'Q&A' | translate}}
                        </ion-label>
                    </ion-item>
                </ion-menu-toggle>
            </ion-list>
        </ion-content>
        <div style="position: fixed;bottom: 0;width: 100%;height: 40px;text-align: center;">
            <span (click)="toPrivacy()" style="color: #009e41;font-size:14px;">用户使用与隐私协议</span>
        </div>
    </ion-menu>

    <div class="ion-page" main>
        <ion-header>
            <ion-toolbar color="care" style="position: relative" mode="ios">
                <ion-buttons>
                    <ion-menu-button></ion-menu-button>
                    <div *ngIf="isIos == 0 && unreadNum>0" class="unreadDotMD"></div>
                    <div *ngIf="isIos == 1 && unreadNum>0" class="unreadDotIOS"></div>
                </ion-buttons>

                <ion-title>{{ 'MyAppoints' | translate }}</ion-title>
            </ion-toolbar>
        </ion-header>

        <ion-content>
            <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
                <ion-refresher-content></ion-refresher-content>
            </ion-refresher>
            <app-order-item *ngFor="let item of dataList" [messageLabel]="item.order_time" [orderAccept]="item.order_accept"
                [nameLabel]="item.english_name" [readLabel]="item.doctor_read" (click)="clickOrder(item)">
            </app-order-item>

            <div style="width: 100%; text-align: center" *ngIf="!!stopLoad">
                {{ 'NoMore' | translate }}
            </div>

            <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
                <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
                </ion-infinite-scroll-content>
            </ion-infinite-scroll>
        </ion-content>
    </div>
</ion-app>
